<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>前端库</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

        <!-- Main Header -->
        <header class="main-header">

            <!-- Logo -->
            <a href="index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>库</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>前端库</b></span>
            </a>

            <!-- Header Navbar -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
                <!-- Navbar Right Menu -->

            </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">

            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">

                <!-- Sidebar Menu -->
                <ul class="sidebar-menu">
                    <li class="header">前端导航</li>
                    <!-- Optionally, you can add icons to the links -->
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard"></i> <span>常用网站</span> </a>
                    </li>
                    <li class="treeview">
                        <a href="#"><i class="fa  fa-html5"></i> <span>HTML</span> <i class="fa fa-angle-left pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="html1.html"><i class="fa fa-circle-o"></i>布局</a></li>
                            <li><a href="html2.html"><i class="fa fa-circle-o"></i>效果</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="css.html"><i class="fa fa-css3"></i> <span>CSS</span> <i class="fa fa-angle-left pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="css1.html"><i class="fa fa-circle-o"></i>常用</a></li>
                            <li><a href="css2.html"><i class="fa fa-circle-o"></i>片段</a></li>
                        </ul>
                    </li>
                    <li class="treeview active">
                        <a href="js.html"><i class="fa  fa-superscript"></i> <span>JS</span> <i class="fa fa-angle-left pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li class="active"><a href="js1.html"><i class="fa fa-circle-o"></i>常用</a></li>
                            <li><a href="js2.html"><i class="fa fa-circle-o"></i>片段</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#"><i class="fa fa-superscript"></i> <span>项目导航</span> <i class="fa fa-angle-left pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="smallsite.html"><i class="fa fa-circle-o"></i>项目</a></li>
                            <li><a href="libs.html"><i class="fa fa-circle-o"></i>公用库</a></li>
                            <li><a href="muban.html"><i class="fa fa-circle-o"></i>我的模板</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- /.sidebar-menu -->
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    常用JS
                    <small>介绍</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li class="active">当前</li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">

                <div class="row">
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-warning collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">针对手机网页的前端开发者调试面板。</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <xmp>//仅供测试使用，正式发布需拿掉
                                    <script src="http://likexia.gitee.io/tools/lib/js/vconsole.min.js"></script>
                                    <script>
                                        // 初始化
                                        var vConsole = new VConsole();
                                        console.log('Hello world');

                                    </script>
                                </xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-success collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">a标签返回上一页</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>原页表表单中的内容会保留</h3>
                                <xmp><a href="javascript:history.back();">返回上一页</a> </xmp>
                                <h3>原页面表单中的内容会丢失</h3>
                                <xmp><a onclick="javascript:history.go(-1);">返回上一页</a> </xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-danger collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">IE7/Ie8 检测是否需要模拟placeholder</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>CSS</h3>
                                <xmp>
                                    <!--[if IE 8]>
            <style type="text/css">
                .label-1{margin:21px 0 0 10px}
.label-2{margin:30px 0 0 10px;}
.label-3{margin:30px 0 0 10px;}
            </style>
        <![endif]-->

                                    <!--[if IE 9]>
<style type="text/css">
.label-1{margin:41px 0 0 10px}
.label-2{margin:41px 0 0 10px;}
.label-3{margin:41px 0 0 10px;}        
            </style>
         <![endif]-->
                                </xmp>
                                <h3>HTML</h3>
                                <xmp>2</xmp>
                                <h3>JS</h3>
                                <xmp>var funPlaceholder = function(element) {
                                    var placeholder = '';
                                    if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
                                    //当前文本控件是否有id, 没有则创建
                                    var idLabel = element.id;
                                    if (!idLabel) {
                                    idLabel = "placeholder_" + new Date().getTime();
                                    element.id = idLabel;
                                    }
                                    //创建label元素
                                    var eleLabel = document.createElement("label");
                                    eleLabel.htmlFor = idLabel;
                                    eleLabel.style.position = "absolute";
                                    //根据文本框实际尺寸修改这里的margin值
                                    eleLabel.style.cursor = "text";
                                    //插入创建的label元素节点
                                    element.parentNode.insertBefore(eleLabel, element);
                                    //事件
                                    element.onfocus = function() {
                                    eleLabel.innerHTML = "";
                                    };
                                    element.onblur = function() {
                                    if (this.value === "") {
                                    eleLabel.innerHTML = placeholder;
                                    }
                                    };
                                    //样式初始化
                                    if (element.value === "") {
                                    eleLabel.innerHTML = placeholder;
                                    }
                                    }
                                    };
                                    funPlaceholder(document.getElementById("mobile"));
                                    funPlaceholder(document.getElementById("verify"));
                                    funPlaceholder(document.getElementById("migucode"));
                                    $("#mobile").prev("label").addClass("label-1");
                                    $("#verify").prev("label").addClass("label-2");
                                    $("#migucode").prev("label").addClass("label-3");</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-primary collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">标题</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>CSS</h3>
                                <xmp>1</xmp>
                                <h3>HTML</h3>
                                <xmp>2</xmp>
                                <h3>JS</h3>
                                <xmp>3</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-warning collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">JQuery请求接口数据</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <xmp>var url = "http://coffee.migu.cn/migutest/migu/app/api/gzexporeport"; $.post(url, {}, function(data, textStatus) { console.log(data.info) console.log(data.data.kindle1) }, "json");</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-success collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">微信页面真实高度</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>除去标题栏，页面高度</h3>
                                <xmp>alert(window.innerHeight)</xmp>
                                <h3>微信标题栏高度</h3>
                                <xmp>alert(window.screen.height - window.innerHeight)</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-danger collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">CheckBox全选/反选/至少选1个</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>全选/反选</h3>
                                <xmp>$(".check-all").click(function() { if($(this).is(':checked')) { $('input[type="checkbox"]').each(function() { $(this).prop("checked", true); }); } else { $('input[type="checkbox"]').each(function() { $(this).removeAttr("checked", false); }); } });
                                </xmp>
                                <h3>至少勾选一个才能提交</h3>
                                <xmp>var num = 0; $("#btn_submit").click(function() { $('input[type="checkbox"]').each(function() { if($(this).is(':checked')) { num += 1; } }); console.log(num); //必须勾选一个 if(num != 0) { alert("至少选一个"); num=0; } else { alert("可以提交"); } });
                                </xmp>
                                <h3>点击行，勾选</h3>
                                <xmp>$("tr").click(function(){ //排除全选框 if(!$(this).find("td input[type='checkbox']").is(":checked")){ $(this).find("td input[type='checkbox']").prop("checked",true); }else{ $(this).find("td input[type='checkbox']").prop("checked",false); } //防止点checkbox冒泡 $("input[type='checkbox']").click(function(e) { e.stopPropagation(); }); });
                                </xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-primary collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">移动端输入法遮挡输入框处理</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>方法一</h3>
                                <xmp></xmp>
                                <h3>方法二</h3>
                                <h3>HTML</h3>
                                <xmp><input type="text" jump=true /></xmp>
                                <h3>JS</h3>
                                <xmp>function jump_top(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
$("body").css("height","0px");
$("body").css("height",document.body.scrollHeight);
$('[jump=true]').bind("focus",function(event){
if($(event.target).attr("type")=="button")return;
$("body").css("margin-bottom","500px");
$(window).scrollTop($(event.target).offset().top-100);
event.preventDefault();
});
$("body").bind("click",function(event){
if($(event.target).attr("type")=="button")return;
$("body").css("height","0px");
$("body").css("height",document.body.scrollHeight);
$("body").css("margin-bottom","0px");
event.preventDefault();
});
};
}</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-primary collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">标题</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>CSS</h3>
                                <xmp>1</xmp>
                                <h3>HTML</h3>
                                <xmp>2</xmp>
                                <h3>JS</h3>
                                <xmp>3</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                    <!--start-->
                    <div class="col-md-6">
                        <div class="box box-primary collapsed-box">
                            <div class="box-header with-border">
                                <h3 class="box-title">标题</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <h3>CSS</h3>
                                <xmp>1</xmp>
                                <h3>HTML</h3>
                                <xmp>2</xmp>
                                <h3>JS</h3>
                                <xmp>3</xmp>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <!--end-->
                </div>

            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <!-- Main Footer -->
        <footer class="main-footer">
            <!-- To the right -->
            <div class="pull-right hidden-xs">
                Anything you want
            </div>
            <!-- Default to the left -->
            <strong>Copyright &copy; 2017 <a href="#">Company</a>.</strong> All rights reserved.
        </footer>

        <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>
    </div>
    <!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.2.0 -->
    <script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
</body>

</html>
